<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <style>
* {margin: 0;padding: 0;}
body {background: #EEEEEE;}
.left {float: left;}
.right {float: right}
ul,ol {list-style: none;}
.clearfix {}
.clearfix:after {
content:"";
height: 0;visibility: hidden;
display: block;
clear: both;
}
.martop30 {margin-top: 30px;}
.orderdetail-container {width: 1200px;margin: 50px auto 0px;}
.orderdetail-hr {height: 5px;background:#B31818;border: none;}
.orderdetail-items {width:1198px;height: 256px;background:#fff;border: solid #DDDDDD;border-width: 2px 1px 0px 1px }
.aside-intro {width: 327px;height:256px;border-right: 1px solid #DDDDDD;position: relative;}
.orderdetail-num {font-size: 12px;color:#333;text-align: center;font-weight: normal;padding-top: 20px; }
.orderdetail-state {font-size: 24px;color:#1D7C9D;text-align: center;margin-top: 30px; }
.orderdetail-operation {width: 100%;position: absolute;bottom: 10px;}
.orderdetail-operation span {width: 50%;text-align: center;font-size: 14px;color: #333;}

.orderdetail-ordermsg {margin-left: 20px;padding-top: 30px;}
.goods-img {width: 110px;display: block;}
.ordermsg-list {margin-left: 20px;}
.ordermsg-list li {font-size: 14px;color:#333; line-height: 35px; }


.main-msg {width: 870px;}

.orderdetail-transport-list {margin:20px;height: 216px;overflow-y: scroll;width: 840px;}
.orderdetail-transport-list li {font-size: 14px;color:#333;position: relative;padding-left: 30px;height: 40px }
.orderdetail-transport-list li.active {color:#C33D1D;}
.orderdetail-transport-list li.active:before {
    content: "";
    width: 5px;height: 5px;background: #C33D1D;border: 3px solid rgb(249,219,189);display: block;border-radius: 50%;
    position: absolute;left: 0;
    top: 5px;
}
.orderdetail-transport-list li.init:before {
    content: "";
    width: 5px;height: 5px;background: #d5d5d5;border: 3px solid #fff;display: block;border-radius: 50%;
    position: absolute;left: 0;
    top: 5px;
}
.orderdetail-transport-list li.line:after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background: #d5d5d5;
    position: absolute;
    top: 18px;
    left: 4px;
}

.order-infor-mod {width: 1198px;height: 256px;padding: 15px 0px;background: #fff;border: solid #DDDDDD;border-width: 2px 1px 0px 1px;}

.order-infor-panel {  width: 262px;border-right: 1px solid #DDDDDD;height: 256px;padding: 0 10px 0 30px;margin: 0 0 0 -1px;}
.order-infor-panel > h4 {font-size: 14px;color: #333;height: 24px;line-height: 24px;font-weight: 400;margin-top: 20px;}
.order-infor-panel dl {font-size: 14px;color: #333;line-height: 24px;}

.order-infor-panel dl dt,dd {float: left;}
.order-infor-panel dl dt {width: 84px;}
.order-infor-panel dl dd {width: 175px;}

.order-process-state {padding: 30px 0 20px 30px;}
.order-state-col {width: 100%;margin: 60px 0 50px;}
.ops-node {width: 80px;height: 40px;text-align: center;}
.ops-node-icon {
    width: 50px;height: 50px;display: inline-block;
    /*background:url("images/img.png") no-repeat center center;*/
    background: #49043c;
}
.ops-node-list {width: 180px;margin-left: -52px;}
.ops-node-list li {line-height: 24px;font-size: 14px;color: #333;}

.ops-doneline {border-top: 3px dashed #1D7C9D;width: 100px;margin-top: 20px;}
    </style>
</head>
<body>

<div class="orderdetail-container">
    <hr class="orderdetail-hr" />
    <div class="orderdetail-items clearfix">
        <div class="aside-intro left">
            <h4 class="orderdetail-num">订单号:xxxxxxxxxx </h4>
            <h3 class="orderdetail-state">商品已出库</h3>
            <div class="orderdetail-operation clearfix">
                <span class="orderdetail-operation-print left">打印订单</span>
                <span class="orderdetail-operation-cancel right">取消订单</span>
            </div>

        </div>
        <div class="main-msg left">


        <div class="order-process-state">
            <div class="order-state-col clearfix">
                <div class="ops-node left">
                    <span class="ops-node-icon"></span>
                    <ul class="ops-node-list">
                        <li>提交订单 </li>
                        <li>2016-07-28</li>
                        <li>18:10:07</li>
                    </ul>
                </div>
                <div class="ops-doneline left"></div>
                <div class="ops-node left">
                    <span class="ops-node-icon"></span>
                    <ul class="ops-node-list">
                        <li>付款成功 </li>
                    </ul>
                </div>
                <div class="ops-doneline left"></div>
                <div class="ops-node left">
                    <span class="ops-node-icon"></span>
                    <ul class="ops-node-list">
                        <li>商品出库</li>
                        <li>2016-07-28</li>
                        <li>19:06:40</li>
                    </ul>
                </div>
                <div class="ops-doneline left"></div>
                <div class="ops-node left">
                    <span class="ops-node-icon"></span>
                    <ul class="ops-node-list">
                        <li>等待收货</li>
                        <li>2016-07-28</li>
                        <li> 21:40:38</li>
                    </ul>
                </div>
                <div class="ops-doneline left"></div>

                <div class="ops-node left">
                    <span class="ops-node-icon"></span>
                    <ul class="ops-node-list">
                        <li>完成 </li>
                        <li>2016-07-28</li>
                        <li>18:10:07</li>
                    </ul>
                </div>
            </div>
        </div>




        </div>
    </div>
    <div class="orderdetail-items martop30 clearfix">
        <div class="aside-intro left">
            <div class="orderdetail-ordermsg clearfix">
                <img class="goods-img left" src="images/img.png" />
                <ul class="ordermsg-list left">
                    <li>送货方式：普通快递</li>
                    <li>承运人：银河宇</li>
                    <li>货运单号：xxxxxxxx</li>
                </ul>

            </div>

        </div>
        <div class="main-msg left">
            <ul class="orderdetail-transport-list">
                <li class="line active">2016-08-31 15：30   感谢您在京东购物，欢迎您再次光临！ </li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class="line init">2016-09-01  15：30   您的订单在京东【北京通州分拣中心】分拣完成</li>
                <li class="line init">2016-09-02  15：30   您的订单在京东【北京通州分拣中心】发货完成，准备送往京东【北京厂洼站】</li>
                <li class=" init">2016-09-03  15：30   2016-07-29 06:52:20您的订单在京东【北京厂洼站】验货完成，正在分配配送员</li>

            </ul>

        </div>
    </div>
    <div class="order-infor-mod martop30 clearfix">
        <div class="order-infor-panel left">
            <h4>收货人信息</h4>
            <dl class="clearfix">
                <dt>收货人：</dt>
                <dd>xxxx</dd>
                <dt>地址：</dt>
                <dd>北京海淀区三环到四环之间紫竹院路69号兵器大厦裙楼一层</dd>
                <dt>手机号码：</dt>
                <dd>xxxxxxxx</dd>
            </dl>
        </div>
        <div class="order-infor-panel left">
            <h4>配送信息</h4>
            <dl class="clearfix">
                <dt>配送方式：</dt>
                <dd>普通快递</dd>
                <dt>运费：</dt>
                <dd>¥0.00</dd>
                <dt>送货日期：</dt>
                <dd>2016-07-29</dd>
                <dt>配送时间：</dt>
                <dd> 9:00-15:00</dd>

            </dl>
        </div>
    </div>
</div>

</body>
</html>